<script setup lang="ts">
import { ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    name: "",
    code: "",
    remark: "",
  }),
  peiz: () => ({
    isExpandAll: "",
  }),
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
const newPeiz = ref(props.peiz);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <div
    class="!min-w-[calc(100vw-60vw-268px)] w-full mt-2 px-2 pb-2 bg-bg_color ml-2 overflow-auto"
  >
    <div class="flex justify-between w-full px-3 pt-5 pb-4">
      <div class="flex">
        <!-- <span :class="iconClass">
          <IconifyIconOffline
            v-tippy="{
              content: '关闭',
            }"
            class="dark:text-white"
            width="18px"
            height="18px"
            :icon="Close"
            @click="handleMenu"
          />
        </span> -->
        <!-- <span :class="[iconClass, 'ml-2']">
          <IconifyIconOffline
            v-tippy="{
              content: '保存菜单权限',
            }"
            class="dark:text-white"
            width="18px"
            height="18px"
            :icon="Check"
            @click="handleSave"
          />
        </span> -->
      </div>
      <p class="font-bold truncate">菜单权限</p>
    </div>
    <!-- <el-input
      v-model="treeSearchValue"
      placeholder="请输入菜单进行搜索"
      class="mb-1"
      clearable
      @input="onQueryChanged"
    /> -->
    <div class="flex flex-wrap">
      <el-checkbox v-model="newPeiz" label="展开/折叠" />
      <!-- <el-checkbox v-model="isSelectAll" label="全选/全不选" />
      <el-checkbox v-model="isLinkage" label="父子联动" /> -->
    </div>
    <!-- <el-tree-v2
      ref="treeRef"
      show-checkbox
      :data="treeData"
      :props="treeProps"
      :height="treeHeight"
      :check-strictly="!isLinkage"
      :filter-method="filterMethod"
    >
      <template #default="{ node }">
        <span>{{ transformI18n(node.label) }}</span>
      </template>
    </el-tree-v2> -->
  </div>
</template>
